<!DOCTYPE html>
<html lang='en'>

<head>
  <meta charset='UTF-8'>
  <meta name='viewport' content='width=device-width, initial-scale=1.0'>
  <title>跟踪导航栏</title>
  <style>
    * {
      box-sizing: border-box;
      padding: 0;
      margin: 0;
    }

    body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      background: url(./bg.jpg) no-repeat center center fixed;
      background-size: cover;
    }

    #nav {
      position: relative;
      border: none;
      border-radius: 10em;
      display: flex;
      list-style: none;
      background: #f5f5f5;
      box-shadow: 20px 40px 40px #00000033;
      padding: 10px;
    }

    #nav li a {
      position: relative;
      padding: 15px 50px;
      font: 500 24px "优设标题黑";
      border: none;
      outline: none;
      color: rgb(70, 100, 180);
      display: inline-block;
      text-decoration: none;
      z-index: 3;
    }

    .slide1,
    .slide2 {
      position: absolute;
      display: inline-block;
      height: 60px;
      border-radius: 10em;
      transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1.05);
    }

    /* 2.5 颜色稍深的 “椭圆矩形” */
    .slide1 {
      background-color: rgb(170, 190, 255);
      z-index: 2;
    }

    /* 2.6 颜色稍浅的 “椭圆矩形” (默认看不见, 鼠标经过才出现) */
    .slide2 {
      opacity: 0;
      background-color: rgba(170, 190, 255, .5);
      z-index: 1;
      box-shadow: 0 0 20px #ffffffaa inset;
    }

    .squeeze {
      transform: scale(0.9);
    }
  </style>
</head>

<body>
  <ul id="nav">
    <li class="slide1"></li>
    <li class="slide2"></li>
    <li><a href="#">Alpha</a></li>
    <li><a href="#">Beta</a></li>
    <li><a href="#">Gamma</a></li>
    <li><a href="#">Delta</a></li>
    <li><a href="#">Epsilon</a></li>
  </ul>
</body>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<script>
  // 3. JS逻辑

  // 3.1 jquery中的 on方法 主要用于为元素绑定事件处理程序, 支持动态添加的元素和多个事件绑定
  // 如下 ->选择了要绑定事件的元素.on + click触发事件 + 执行函数
  $('#nav a').on('click', function () {
    // 3.2 this指向当前点击元素、parent()指定元素的直接父元素、position()当前父元素的具体位置
    var position = $(this).parent().position();

    // 3.3 指定当前活跃a标签为 ->当前点中 父元素(li) 具体的宽度！！！
    var width = $(this).parent().width();

    // 3.4 特殊用法: css({ properties })
    $('#nav .slide1').css({ opacity: 1, left: +position.left, width: width });
  });

  // 3.5 鼠标经过时, 显示一个 [浅蓝、缩放为0.9] 样式的 “椭圆矩形”
  $('#nav a').on('mouseover', function () {
    var position = $(this).parent().position();
    var width = $(this).parent().width();
    $('#nav .slide2').css({ opacity: 1, left: +position.left, width: width }).addClass('squeeze');
  });

  $('#nav a').on('mouseout', function () {
    $('#nav .slide2').css({ opacity: 0 }).removeClass('squeeze');
  });

  // 3.end 默认给nav中的 slide1 设置一个初始深蓝 “椭圆矩形”
  var currentWidth = $('#nav li:nth-of-type(3) a').parent('li').width();
  var current = $('li:nth-of-type(3) a').position();
  $('#nav .slide1').css({ left: +current.left, width: currentWidth });
</script>

</html>